<template>
	<div>
		<!-- 表单 -->
		<div class="app-container">
			<div class="w-full bg-[#4b8dffcc] h-10 border">
				<p class="pl-4 leading-10 font-bold text-[#fff]">{{ $t('machine.configs.subjectInfo') }}</p>
			</div>
			<div class="w-full flex flex-wrap pl-10 border p-4 mb-4 relative">
				<div class="w-1/3">
					<div class="mb-4 truncate">{{ $t('goods.corner.activitName') }}: <span class="ml-4">{{
						data.findList.lottery_name }}</span></div>
					<div class="mb-4 truncate">{{ $t('machine.marketing.Applicable') }}: <span
							class="ml-4 text-[#409EFF] cursor-pointer" @click="toDetails(data.findList, 1)">{{
								setMachine(data.findList) }}</span></div>
					<div class="mb-4 truncate">{{ $t('marketing.preferential.state') }}: <span class="ml-4">{{
						setActStatus(data.findList.status) }}</span>
					</div>
					<div class="mb-4 truncate">{{ $t('marketing.reduction.desc') }}: <span class="ml-4">{{
						data.findList.desc ?
							data.findList.desc : '--' }}</span></div>
				</div>
				<div class="w-1/3">
					<div class="mb-4 truncate">{{ $t('marketing.guess.activityLocation') }}: <span class="ml-4">{{
						setPosition(data.findList.position) }}</span>
					</div>
					<div class="mb-4 truncate">{{ $t('marketing.guess.activityContent') }}: <span
							class="ml-4 text-[#409EFF] cursor-pointer" @click="toDetails(data.findList, 2)">{{
								setContent(data.findList) }}</span></div>
					<div class="mb-4 truncate">{{ $t('marketing.guess.profitShar') }}: <span class="ml-4">{{
						setShare_benefit(data.findList.share_benefit) }}</span></div>
				</div>
				<div class="w-1/3">
					<div class="mb-4 truncate">{{ $t('marketing.guess.singleWithd') }}: <span class="ml-4">{{
						data.findList.price }}</span></div>
					<div class="mb-4 truncate">{{ $t('marketing.guess.activeConfig') }}: <span
							class="ml-4 text-[#409EFF] cursor-pointer" @click="toDetails(data.findList, 3)">{{
								setConfig(data.findList) }}</span></div>
					<div class="mb-4 truncate">{{ $t('date.activeDate') }}:
						<span class="ml-4" v-if="!data.findList.start_time">--</span>
						<span class="ml-4">{{ getPlevel.gettime(data.findList.start_time, 3) }}~{{
							data.findList.end_time ? getPlevel.gettime(data.findList.end_time, 3)
								: $t('public.unlimited') }}</span>
					</div>
				</div>
				<div class="absolute right-5 bottom-5">
					<el-button @click="modify(data.findList)">{{ $t('public.modify') }}</el-button>
				</div>
			</div>
			<div>
				<el-button @click="cancel">{{ $t('public.return') }}</el-button>
				<el-button v-prmis="'activity_lottery_exportAlUsed'" type="primary" @click="getExport">{{
					$t('marketing.preferential.exportOrder') }}</el-button>
			</div>
		</div>
		<!-- 表格 -->
		<div class="app-container" v-loading="data.mtloading">
			<el-table :data="data.list" height="670" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full">
				<el-table-column type="expand">
					<template #default="props">
						<el-table :data="props.row.Children" :header-cell-style="{ 'text-align': 'center' }"
							:cell-style="{ 'text-align': 'center' }" class="w-full">
							<el-table-column prop="sod_id" :label="$t('marketing.guess.id')" />
							<el-table-column prop="g_id" :label="$t('eventlog.goods.goods')+'ID'" />
							<el-table-column prop="g_name" :label="$t('machine.goods.name')" show-overflow-tooltip />
							<el-table-column prop="sku" label="SKU" />
							<el-table-column prop="probability" :label="$t('marketing.guess.probability')+'(%)'" />
							<el-table-column prop="mc_id" :label="$t('marketing.guess.channelId')" />
							<el-table-column prop="channel_code" :label="$t('report.supplement.channelNum')" />
							<el-table-column prop="quantity" :label="$t('marketing.guess.quantity')" />
							<el-table-column prop="content_name" :label="$t('marketing.guess.rewardName')" />
						</el-table>
					</template>
				</el-table-column>
				<el-table-column type="index" width="55" :label="$t('public.No')" />
				<el-table-column prop="al_id" :label="$t('marketing.guess.lotteryID')" />
				<el-table-column prop="trade_no" :label="$t('marketing.preferential.orderCode')" />
				<el-table-column prop="machine_name" :label="$t('machine.name')" show-overflow-tooltip />
				<el-table-column prop="machine_id" :label="$t('machine.code')" show-overflow-tooltip />
				<el-table-column prop="price" :label="$t('marketing.guess.unitPrice')" show-overflow-tooltip />
				<el-table-column prop="quantity" :label="$t('marketing.guess.drawsNum')"
					show-overflow-tooltip></el-table-column>
				<el-table-column prop="total_price" :label="$t('marketing.guess.actualTotal')"
					show-overflow-tooltip></el-table-column>
				<el-table-column prop="active_type" :label="$t('marketing.guess.type')" show-overflow-tooltip>
					<template #default="scope">
						<el-tag v-if="scope.row.active_type == 1" type="warning">{{ setType(scope.row) }}</el-tag>
						<el-tag v-else type="success">{{ setType(scope.row) }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column :label="$t('public.state')" show-overflow-tooltip>
					<template #default="scope">
						<el-tag v-if="scope.row.status == 1" type="info">{{ $t('marketing.guess.Waiting') }}</el-tag>
						<el-tag v-if="scope.row.status == 2" type="success">{{ $t('public.used') }}</el-tag>
						<el-tag v-if="scope.row.status == 3" type="warning">{{ $t('public.expired') }}</el-tag>
						<el-tag v-if="scope.row.status == 4" type="danger">{{ $t('public.invalid') }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="create_time" :label="$t('date.createTime')" show-overflow-tooltip>
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.create_time, 3) }}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<PageNum :total="data.total" :page="data.order" @exposeData="current" @fraction="fraction" />
		</div>
		<el-dialog v-model="data.isDialog" :title="data.title" center :width="data.type == 'quantity' ? '30%' : '40%'"
			:class="data.type == 'quantity' ? '' : 'h-3/4 overflow-auto'">
			<machine :info="data.macgods" v-if="data.type == 'machine'" />
			<goods :info="data.macgods" v-if="data.type == 'goods'" />
			<config :info="data.macgods" v-if="data.type == 'config'" />
		</el-dialog>
		<exports :dialogVisible="dialogExport" @close="dialogExport = false" />
	</div>

</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import PageNum from '@/components/PageNum/index.vue';
import { getlotusedList, exportlotteryAlUsed, getlotteryFind } from '@/api/marketing'
import { useRoute, useRouter } from "vue-router";
import getPlevel from '@/utils/level'
import machine from '../common/machine.vue';
import goods from '../common/goods.vue';
import config from '../common/config.vue';
import { ElMessage, ElMessageBox } from "element-plus";
import exports from '@/components/export.vue';
const dialogExport = ref(false)
let route = useRoute()
let router = useRouter()
let data = reactive({
	macgods: [], // 弹窗设备/商品信息
	title: '', // 弹窗标题
	type: '', // 弹窗类型
	isDialog: false,
	mtloading: false, // 加载
	order: { // 传参
		fd_id: null,
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
	lotusedList:[],
	list: [], // 列表信息
	objcet: {
		type: 3,
		file_path: ''
	},
	findList: {}
})
// 修改优惠券
let modify = (e) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: e
		}))
	}
	router.push({ path: '/marketing/guess/details_info', query: query })
}
//取消
let cancel = () => {
	router.back()
}
let toDetails = (row: any, flag: number) => {
	data.isDialog = true
	if (flag == 1) {
		data.type = 'machine'
		data.title = $t('machine.marketing.Applicable')
		data.macgods = row.machineList
	} if (flag == 2) {
		data.type = 'goods'
		data.title = $t('marketing.guess.activityContent')
		data.macgods = row.content
	}
	if (flag == 3) {
		data.type = 'config'
		data.title = $t('marketing.guess.activeConfig')
		data.macgods = row.config
	}
}
let setConfig = (row: any) => {
	if (row.config && row.config.length) {
		row.configCn = row.config.length + '条'
	} else {
		row.configCn = '--'
	}
	return row.configCn
}
let setMachine = (row: any) => {
	if (row.machineList && row.machineList.length) {
		row.machineCn = row.machineList.length + '台'
	}
	return row.machineCn
}
let setContent = (row: any) => {
	if (row.content && row.content.length) {
		row.contentCn = row.content.length + '条'
	} else {
		row.contentCn = '--'
	}
	return row.contentCn
}
let setShare_benefit = (e) => {
	if (e == 1) {
		e = $t('public.yes')
	}
	if (e == 2) {
		e = $t('public.no')
	}
	return e
}
let setPosition = (e) => {
	if (e == 1) {
		e = $t('home.home')
	}
	if (e == 2) {
		e = $t('home.Shipment')
	}
	return e
}
let setActStatus = (e) => {
	if (e == 1) {
		e = $t('goods.corner.not')
	}
	if (e == 2) {
		e = $t('goods.corner.progress')
	}
	if (e == 3) {
		e = $t('goods.corner.ended')
	}
	if (e == 4) {
		e = $t('marketing.guess.active')
	}
	return e
}
let getFind = () => {
	let id = Number(route.query.id)
	getlotteryFind({ al_id: id }).then(res => {
		data.findList = res.data
	})
}
getFind()
// 处理优惠卷类型
let setType = (row) => {
	let active_type = ''
	if (row.active_type == 1) {
		active_type = $t('marketing.guess.Single')
	}
	if (row.active_type == 2) {
		active_type = $t('marketing.guess.continuous')
	}
	return active_type
}
// 获取列表信息
let getData = () => {
	data.order.al_id = route.query.id
	getlotusedList(data.order).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}

// 页数回调
let current = (e) => {
	data.order.page = e
	getData()
}

// 条数回调
let fraction = (e) => {
	data.order.pageNum = e
	getData()
}
// 导出
let getExport = () => {
	let obj = {
		al_id: Number(route.query.id)
	}
	ElMessageBox.confirm($t('message.isExport')).then(res => {
		exportlotteryAlUsed(obj).then(res => {
			if (res.state == 200) {
				dialogExport.value = true
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		}).catch(err => {
			console.log(err)
		})
	}).catch(err => {
		console.log('取消')
	})
}
getData()
</script>
